<template>
  <div class="add">
    <div class="head-search">
      <search @onSubmit="onSearch">
        <el-form-item label="名称">
          <el-input placeholder="请输入内容" clearable v-model="searchData.mdName" size="small"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="searchData.mdType" clearable placeholder="请选择类型">
            <el-option v-for="(item, index) in dicDataType"
                       :key="index"
                       :label="item.dictLabel"
                       :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="编码">
          <el-input placeholder="请输入内容" clearable v-model="searchData.mdCode" size="small"></el-input>
        </el-form-item>
      </search>
<!--      <el-button type="primary" size="small" :disabled="tableSelected.length<1" class="pl-add">批量添加表字段</el-button>-->
    </div>

    <avue-crud :option="option"
               :table-loading="tableLoading"
               :data="tableData"
               :page.sync="page"
               ref="crud"
               @selection-change="handleSelectChange"
               @on-load="onLoad"
    >
      <template slot="menu" slot-scope="{row}">
        <el-button @click="handleAdd(row)"
                   type="primary"
                   :loading="row.loading"
                   size="small">添加</el-button>
      </template>

      <template slot="isPrimaryKey" slot-scope="{row}">
        <el-switch v-model="row.isPrimaryKey" disabled></el-switch>
      </template>

      <template slot="isExtend" slot-scope="{row}">
        <el-switch v-model="row.isExtend" disabled></el-switch>
      </template>
      <template slot="isAutoIncrement" slot-scope="{row}">
        <el-switch v-model="row.isAutoIncrement" disabled></el-switch>
      </template>

      <template slot="isQuickQuery" slot-scope="{row}">
        <el-switch v-model="row.isQuickQuery" disabled></el-switch>
      </template>
      <template slot="isQuery" slot-scope="{row}">
        <el-switch v-model="row.isQuery" disabled></el-switch>
      </template>
      <template slot="isNull" slot-scope="{row}">
        <el-switch v-model="row.isNull" disabled></el-switch>
      </template>
      <template slot="isEnable" slot-scope="{row}">
        <el-switch v-model="row.isEnable" disabled></el-switch>
      </template>
      <template slot="isTableHead" slot-scope="{row}">
        <el-switch v-model="row.isTableHead" disabled></el-switch>
      </template>
      <template slot="defTableHead" slot-scope="{row}">
        <el-switch v-model="row.defTableHead" disabled></el-switch>
      </template>
    </avue-crud>

  </div>
</template>

<script>
import Search from '../../../../../components/search/search'
import { addEntityCategoryList, getMetadataList } from '../../../../../api/category/category'

export default {
  name: 'addCategoryDet',
  props: {
    dicDataType: {
      type: Array,
      default: () => ([])
    },
    idTable: {
      type: String,
      default: ''
    }
  },
  components: { Search },
  data () {
    return {
      searchData: {
        mdName: '',
        mdType: '',
        mdCode: ''
      },
      page: {
        currentPage: 1,
        pageSize: 20,
        pageSizes: [20, 40, 60, 80],
        total: 0
      },
      tableLoading: false,
      tableData: [],
      tableSelected: [],
      option: {
        align: 'center',
        menuAlign: 'center',
        header: false,
        border: true,
        size: 'medium',
        height: 'calc(100vh - 240px)',
        index: true, // 显示序号
        indexLabel: '序号', // 显示序号
        selection: true, // 多选
        editBtn: false, // 行内编辑按钮
        delBtn: false, // 行内删除按钮
        viewBtn: false, // 行内查看按钮
        menuWidth: 120,
        labelWidth: 110,
        column: [
          {
            label: '名称',
            prop: 'mdName',
            overHidden: true
          },
          {
            label: '类型',
            prop: 'mdType',
            type: 'select',
            overHidden: true,
            dicUrl: '/yuyi-config-boot/api/config/dictData/child?dictTypeName=metadata_type',
            props: {
              label: 'dictLabel',
              value: 'dictValue'
            }
          },
          {
            label: '编码',
            prop: 'mdCode',
            overHidden: true
          },
          {
            label: '长度',
            prop: 'mdLength'
          },
          {
            label: '是否为默认表头',
            prop: 'defTableHead',
            type: 'switch',
            slot: true,
            value: false,
            width: 150,
            dicData: [{ value: false }, { value: true }]
          },
          {
            label: '默认表头宽度(px)',
            prop: 'defWidthHead',
            type: 'number',
            width: 150,
            minRows: 80,
            value: 80
          },
          {
            label: '主键',
            prop: 'isPrimaryKey',
            type: 'switch',
            span: 6,
            slot: true,
            value: false,
            dicData: [{ value: false }, { value: true }]
          },
          {
            label: '为空',
            prop: 'isNull',
            type: 'switch',
            slot: true,
            span: 6,
            value: false,
            dicData: [{ value: false }, { value: true }]
          },
          {
            label: '可用',
            prop: 'isEnable',
            type: 'switch',
            slot: true,
            span: 6,
            value: false,
            dicData: [{ value: false }, { value: true }]
          },
          {
            label: '可查询',
            prop: 'isQuery',
            type: 'switch',
            slot: true,
            span: 6,
            value: false,
            dicData: [{ value: false }, { value: true }]
          },
          {
            label: '可序列',
            prop: 'isQuickQuery',
            type: 'switch',
            slot: true,
            span: 6,
            value: false,
            dicData: [{ value: false }, { value: true }]
          },
          {
            label: '自增',
            prop: 'isAutoIncrement',
            type: 'switch',
            slot: true,
            span: 6,
            value: false,
            dicData: [{ value: false }, { value: true }]
          },
          {
            label: '继承',
            prop: 'isExtend',
            type: 'switch',
            slot: true,
            span: 6,
            value: false,
            dicData: [{ value: false }, { value: true }]
          },
          {
            label: '是否可设为表头',
            prop: 'isTableHead',
            type: 'switch',
            slot: true,
            span: 6,
            value: false,
            width: 150,
            dicData: [{ value: false }, { value: true }]
          }
        ]
      }
    }
  },
  methods: {
    onLoad () {
      const param = {
        pageNo: this.page.currentPage,
        pageSize: this.page.pageSize,
        params: []
      }
      Object.keys(this.searchData).forEach(key => {
        if (this.searchData[key]) {
          param.params.push({
            name: key,
            op: key === 'mdType' ? 'eq' : 'like',
            value: this.searchData[key]
          })
        }
      })
      this.tableLoading = true
      getMetadataList(param).then(res => {
        this.tableData = res.data.data.list
        this.page.total = res.data.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    onSearch () {
      // 搜索
      this.onLoad()
    },
    handleSelectChange (val) {
      this.tableSelected = val
    },
    handleAdd (row) {
      // 添加
      delete row.id
      row.idTable = this.idTable
      addEntityCategoryList(row).then(() => {
        this.$message.success('新增成功！')
        this.$emit('handleSuccess')
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .add {
    margin-top: -30px;

    .head-search {
      padding-top: 10px;

      ::v-deep .search-btn {
        margin-top: 0;
      }
      .pl-add{
        margin-top: 6px;
        border: 1px solid rgba(0, 0, 0, 0);
      }
    }
    ::v-deep td{
      .cell{
        padding: 5px 10px;
      }
    }
  }

</style>
